<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .alldata{
            width:400px;
            margin:100px auto;
        }
        .listhead{
            font-size:16px;
            font-weight:800;
            color:#999;
            padding:10px;
        }
        .list{
            background:#ccc;
            padding:10px;
            margin-top:10px;
        }
        .fl{
            float:left;
        }
        .clearfix:after{
            clear:both;
            display:table;
            content:'';
        }
        .listhead>div,.list>div{
            float:left;
            width:25%;
            text-align:center;
        }
        .list>div:nth-of-type(4){
            color:green;
        }
    </style>
</head>
<body>
<div class="alldata">
    <div class="listhead clearfix">
        <div>国家</div>
        <div>确诊</div>
        <div>死亡</div>
        <div>治愈</div>
    </div>
    <script>
        var allData = [
            {pName:'菲律宾',queZhen:2,deadCount:1,okCount:0},
            {pName:'日本',queZhen:20,deadCount:0,okCount:1},
            {pName:'泰国',queZhen:19,deadCount:0,okCount:7},
            {pName:'新加坡',queZhen:18,deadCount:0,okCount:0},
            {pName:'韩国',queZhen:16,deadCount:0,okCount:1}
        ];
        for(var i=0;i<allData.length;i++){
            document.write("<div class='list clearfix'> " +
                "<div>"+allData[i].pName+"</div> " +
                "<div>"+allData[i].queZhen+"例</div> " +
                "<div>"+allData[i].deadCount+"例</div> " +
                "<div>"+allData[i].okCount+"例</div> " +
                "</div>");
        }
    </script>
</div>

</body>
</html>